<template>
  <div>
    <zm-form>
    <zm-form-item label="选择线上特殊节假日规则">
      <zm-button
        type="primary"
        icon="el-icon-plus"
        @click="handleChoosePlan"
        size="mini"
      >
        选择方案
      </zm-button>
    </zm-form-item>
    </zm-form>
    <zm-detail-table :list="list" :info="detailInfo" v-if="showDetail"></zm-detail-table>
    <!-- 详情规则折叠面板 -->
    <detail-collapse :info-list="detailInfo.rule" v-if="showDetail" :exchange-range="detailInfo.exchangeRange"></detail-collapse>
    <!-- 选择方案组件 -->
    <choose-plan
      v-if="choosePlanParams.visible"
      v-model="choosePlanParams.visible"
      @handle-after="choosePlanCallBack"
      :params="choosePlanParams.params"
      :selected="selectedID"
    ></choose-plan>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import ChoosePlan from '../ChoosePlan'
import ZmDetailTable from '@/components/zmDetailTable'
import DetailCollapse from '@/views/product/components/DetailCollapse'
import productProgramApis from '@/api/src/productProgram'
import { list } from './const'
export default {
  name: 'OnlineSpecial',
  components: { ChoosePlan, ZmDetailTable, DetailCollapse },
  mixins: [tableMixin],
  inject: ['$product'],
  data () {
    return {
      choosePlanParams: {
        visible: false
      },
      detailInfo: {},
      showDetail: false,
      selectedID: ''
    }
  },
  computed: {
    list () {
      return list(this)
    },
    form: {
      get () {
        return this.$product.form
      },
      set (val) {
        this.$product.form = val
      }
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.$product.id) {
        // 数据回填
        if (this.form.onlineSpecialRule[0].programId) {
          this.selectedID = this.form.onlineSpecialRule[0].programId
          this.choosePlanCallBack(this.selectedID)
        }
      }
    },
    handleChoosePlan () {
      let type = ''
      if (this.form.type === '5') {
        // 产品类型为优惠券的情况，type 对应的是 2
        type = '2'
      } else {
        type = '1'
      }
      this.choosePlanParams = {
        visible: true,
        params: {
          exchangeRange: 'online',
          type: type // 第一步选择的产品类型
        }
      }
      this.selectedID = this.form.onlineSpecialRule[0].programId
    },
    async choosePlanCallBack (val) {
      this.$set(this.form.onlineSpecialRule, 0, {programId: val})
      const _res = await productProgramApis.getInfo({ id: val })
      this.detailInfo = _res
      this.showDetail = true
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
